<template>
  <div id="bj28Page" class="view">
    <game-header :caipiaoTerm='caipiaoTermCon' :caipiaoName='caipiaoName'></game-header>
    <el-tabs type="border-card" v-model="activeName" @tab-click='changeTab'>
      <el-tab-pane v-for="item in liuhe.play" :label="item.backup1" :key="item.order" :name="item.order">
        <el-tabs  v-model="activeName2">
          <el-tab-pane v-for="p in item.children" :key="p.order2" :label="p.name" :name="p.order2">
            <component v-bind:is="p.myTab" :caipiaoTerm='caipiaoTermCon' :childArr = "p"></component>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import header from '../../gamesub/header.vue'
  import nav from '../../gamesub/nav.vue'
  import tema from './play/tema'
  import ptxw from './play/ptxw'
  import lm from './play/lm'
  import txtw from './play/txtw'
  import lianxiao from './play/lianxiao'
  import lianwei from './play/lianwei'

  export default {
    data () {
      return {
      	caipiaoName: '北京28',
      	caipiaoTerm: 1,
      	caipiaoTermCon: 2123123123,
        activeName: '0',
        activeName2: '0',
        ticketId: 20,
        gameArr: [],
        liuhe: {
          play: [
            {
              id: 1,
              name: '特码',
              time: 1.7,
              number: [1, 5, 8],
              children: [
                {
                  id: 1,
                  name: '特码',
                  time: 1.7,
                  number: [1, 5, 8],
                  myTab: 'my-tema'
                }
              ]
            },
            {
              id: 2,
              name: '混合玩法',
              time: 1.7,
              number: [1, 5, 8],
              children: [
                {
                  id: 1,
                  name: '混合玩法',
                  time: 1.7,
                  number: [1, 5, 8],
                  myTab: 'my-ptxw'
                }
              ]
            },
            {
              id: 3,
              name: '波色',
              time: 1.7,
              number: [1, 5, 8],
              children: [
                {
                  id: 1,
                  name: '波色',
                  time: 1.7,
                  number: [1, 5, 8],
                  myTab: 'my-lianxiao'
                }
              ]
            },
            {
              id: 4,
              name: '豹子',
              time: 1.7,
              number: [1, 5, 8],
              children: [
                {
                  id: 1,
                  name: '豹子',
                  time: 1.7,
                  number: [1, 5, 8],
                  myTab: 'my-lianwei'
                }
              ]
            },
            {
              id: 5,
              name: '特码三压一',
              time: 1.7,
              number: [1, 5, 8],
              children: [
                {
                  id: 1,
                  name: '特码三压一',
                  time: 1.7,
                  number: [1, 5, 8],
                  myTab: 'my-lm'
                }
              ]
            }
          ]
        }
      }
    },
    created () {
    },
    methods: {
    	changeTab () {
    		this.activeName2 = "0"
    	}
    },
    components: {
      'game-header': header,
      'game-nav': nav,
      'my-tema': tema,
      'my-ptxw': ptxw,
      'my-lm': lm,
      'my-txtw': txtw,
      'my-lianwei': lianwei,
      'my-lianxiao': lianxiao
    }
  }
</script>

<style lang="less">
  #bj28Page {
    /*border:1px solid #ccc;*/
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
      background-color: #f13131;
      color: white;
    }
    .content {
      background-color: #fff;
      border-bottom: 1px solid #ddd;
    }

  }
</style>
